לפעמים יש לנו באתר אלמנטים שאנחנו רוצים להציג איתם מידע נוסף אבל השימוש ב-title לא מתאים לנו.
בשביל זה יש לנו את jQuery, סיפרייה אשר איתה ניצור Tooltip קטן ויעיל למטרות אלו.
הקוד עצמו להפעלת הטולטיפ מבוסס על 4 חלקים.
1) קוד המקור של הפלאגין עצמו, אשר אוניברסלי לכל אתר ואתר.
2) קוד ה-CSS אשר איתו ניתן לסגנן ולשנות את המראה של הטולטיפ.
3) קוד ה-HTML אשר איתו מגדירים מה יהיה תוכן הטולטיפ במעבר עליו.
4) קוד ה-Javascript אשר מקשר בין קוד ה-HTML להפעלת הפלאגין.
כל הקודים מאוחסנים ב-pastebin למען נוחיותכם.
קוד המקור של הפלאגין
לנוחיותכם ולהבנה מקסימאלית, הוספתי קומנטים לאורך כל קוד המקור.
http://pastebin.com/ZrEyuRcT
יש לשמור כקובץ נפרד, מומלץ עם השם jquery.tooltip.js. יש לשלב את הקוד לאחר שילוב ספריית ה-jQuery.
קוד ה-CSS של הטולטיפ
בכדי להתאים אישית את הטולטיפ לפי המראה הרצוי לכם, ניתן לשנות בקלות את קוד ה-CSS. כברירת מחדל, הטולטיפ הינו בצבע שחור עם כתב לבן.
http://pastebin.com/NvTMw696
קוד ה-HTML
יש מגוון שיטות לבחור מתי וכיצד להציג את הטולטיפ. אני העדפתי לשלב טיפ-טיפה HTML5.
http://pastebin.com/STYddk5D
מה שחשוב זה להוסיף את הקלאס ui-title בכדי שקוד ה-JS יזהה את האלמנט, ו-data-title שיכיל את הטקסט שיופיע בטולטיפ.
קוד ה-Javascript לקישור בין ה-HTML לפלאגין
http://pastebin.com/9yEUfFeQ
שימו לב לשימוש בפונקציה on על פני bind פשוט. ההבדל הוא, ש-on תקף גם לאלמנטים דינאמיים שנוצרים גם אחרי שטעינת הדף הושלמה כבר.
זה הכל! הקוד אמור לעבוד בלי שום בעיות והתאמות מסויימות. בכל בעיה, באג או סתם שאלה, אתם מוזמנים לפרסם כאן בתגובות.
הוסיפו אותי בפייסבוק!
תגובות לכתבה:
נחמד בהחלט, אבל למה ב-CSS עשית את ההגדרות על פי ID ולא על פי קלאס? אתה פשוט סוגר את הקוד לפעם אחת בדף.. וזה לא המטרה שלו :)
תודה על הקוד !
אולי תצרף דמו ? :)
@KingYes - בגלל שזה התאים לי יותר כשבניתי את הפלאגין, במקור הוא היה בשביל שימוש עצמי והחלטתי להפיץ אותו לציבור. אפשר לשנות מאוד בקלות את הסלקטור בפלאגין.
@shlomo120 - רעיון טוב, יש מצב אעדכן בקרוב עם דמו.
@nfsalon, אני מדבר על יעילות. אתה כבר כתבת לזה פלאגין בפני עצמו והכל טוב ויפה, אבל חבל שאת ההגדרות של ה-CSS סגרת על פי ID ולא קלאס.
תודה על השיתוף. :)
@KinkYes, מה היית ממליץ?
פשוט לעשות במקום ב-CSS להשתמש ב-#tooltip כאלמנט ראשי, תשנה אותו לקלאס. כמובן לשנות בקוד ה-JQ.. וככה אתה יכול להשתמש בקוד הזה לכמה חלקים בדף בלי בעיה.
לא עובד לי..
מיקמתי את הקבצים בתקייה כלשהיא וקישרתי, אבל זה לא מצליח,
אחר כך ניסיתי לעשות כך:
<link rel="stylesheet" type="text/css" href="http://pastebin.com/raw.php?i=NvTMw696"; />
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"; type="text/javascript"></script>
<script src="http://pastebin.com/raw.php?i=ZrEyuRcT"; type="text/javascript"></script>
<script src="http://pastebin.com/raw.php?i=9yEUfFeQ"; type="text/javascript"></script>
(ה-CSS, יבוא ה-JQUERY,קובץ JQUERY, ו-JS)
וב-body:
<a href="#" class="ui-title" data-title="עוד אפשרויות">...</a>
ועדין לא עובד..
יכול להיות כי אתה עובד עם jquery בגירסא 1.4.4, תנסה את 1.8.3
http://pastebin.com/z1rGVP5L
תודה, זאת באמת הייתה הבעיה!